<template>
	<view class="Distribution" :style="{paddingTop: $u.addUnit(44 + $u.sys().statusBarHeight,'px'),}">
		<u-navbar :auto-back="true" title="邀请有奖" :bg-color="bgColor"></u-navbar>
		<image mode="aspectFill" class="dis_bg" src="/static/invitBg.jpg"></image>
		<scroll-view @scroll="pageScroll" scroll-y class="dis_box">
			<view class="dis_img1">
				<u-image width="100%" height="323rpx" mode="widthFix" src="/static/slogan.png"></u-image>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<button open-type="share" class="u-reset-button dis_img2">
				<u-image width="100%" height="566rpx" mode="widthFix" src="/static/invite-step.png"></u-image>
			</button>
			<!-- #endif -->
			<!-- #ifdef APP-PLUS -->
			<view @click="shareFriend" class="dis_img2">
				<u-image width="100%" height="566rpx" mode="widthFix" src="/static/invite-step.png"></u-image>
			</view>
			<view class="flex_box flex_row_center dis_nav">
				<view @click="$goUrl('/pages/mine/distribution/poster','to')" class="flex_box">
					<view>试试这些海报成功率更高</view>
					<u-icon name="arrow-right" color="#ffffff"></u-icon>
				</view>
			</view>
			<!-- #endif -->
			<view class="flex_box flex_row_center dis_nav dis_nav1">
				<view @click="$goUrl('/pages/mine/distribution/intro','to')" class="flex_box">
					<view>查看赚钱攻略</view>
					<u-icon name="arrow-right" color="#ffffff"></u-icon>
				</view>
			</view>
			<view v-if="detail" class="dis_progress">
				<view class="dis_progress_content">
					<view class="flex_box flex_row_center dis_progress_title">
						<u-image width="400rpx" height="62rpx" src="/static/invite-title.png"></u-image>
					</view>
					<view class="flex_box flex_row_between dis_progress_top">
						<view class="dis_progress_item">
							<view class="dis_progress_num">{{detail.start}}元</view>
							<view class="dis_progress_name">在路上</view>
						</view>
						<u-line color="#E9E9E9" length="96rpx" direction="col"></u-line>
						<view class="dis_progress_item">
							<view class="dis_progress_num">{{detail.over}}元</view>
							<view class="dis_progress_name">已获得</view>
						</view>
						<u-line color="#E9E9E9" length="96rpx" direction="col"></u-line>
						<view class="dis_progress_item">
							<view class="dis_progress_num">{{detail.withdraw}}元</view>
							<view class="dis_progress_name">已提现</view>
						</view>
					</view>
					<u-button throttleTime="1000" @click="$goUrl('/pages/mine/distribution/detail','to')" shape="circle" :custom-style="btnStyle">
						<view class="dis_progress_btn_text">进度明细</view>
						<u-icon size="26rpx" color="#E9665C" name="arrow-right"></u-icon>
					</u-button>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import { distIndex, getSetInfo } from '@/common/http.api.js';
	let that;
	export default {
		data() {
			return {
				bgColor: 'transparent',
				btnStyle: {
					width: '230rpx',
					height: '64rpx',
					border: '2rpx solid #E9665C'
				},
				detail: null,
			}
		},
		onLoad() {
			that = this;
		},
		onShow() {
			that.getIndex();
		},
		methods: {
			pageScroll(e){
				that.bgColor = e.detail.scrollTop > 40 ? '#00bb9a' : 'transparent';
			},
			getIndex() {
				distIndex()
					.then(res => {
						that.detail = res.data;
					})
					.catch(err => {
						uni.$u.toast(err.msg);
					});
			},
			// app分享到微信
			shareFriend(){
				uni.share({
				    provider: 'weixin',
				    scene: "WXSceneSession",
				    type: 5,
				    imageUrl: that.shareInfo.image,
				    title: that.shareInfo.title,
				    miniProgram: {
				        id: that.appId,
				        path: `/pages/home/index/index?invitation=${that.userInfo.invitation}`,
				        type: 0,
				        webUrl: that.baseUrl
				    },
				    success: ret => {
				        that.$refs.uToast.show({
				        	type: 'success',
				        	title: '分享成功'
				        });
				    }
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.Distribution{
		height: 100vh;
		position: relative;
		.dis_bg{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
		}
		.dis_box{
			position: relative;
			width: 100%;
			height: 100%;
			z-index: 2;
			.dis_img1{
				padding: 0 40rpx;
				margin-bottom: 67rpx;
			}
			.dis_img2{
				padding: 0 49rpx;
			}
			.dis_nav{
				height: 56rpx;
				line-height: 56rpx;
				font-size: 26rpx;
				color: #ffffff;
				font-weight: bold;
			}
			.dis_nav1{
				margin: 35rpx 0 75rpx;
			}
			.dis_progress{
				padding: 0 24rpx 40rpx;
				.dis_progress_content{
					background: #FFFFFF;
					border-radius: 18rpx;
					padding: 48rpx 0;
					position: relative;
					.dis_progress_title{
						position: absolute;
						top: -40rpx;
						left: 0;
						width: 100%;
						height: 80rpx;
					}
					.dis_progress_top{
						height: 200rpx;
						.dis_progress_item{
							width: 234rpx;
							text-align: center;
							.dis_progress_num{
								font-size: 30rpx;
								color: #39BFA1;
								font-weight: bold;
								line-height: 56rpx;
							}
							.dis_progress_name{
								font-size: 26rpx;
								color: #333333;
								font-weight: 500;
								line-height: 54rpx;
							}
						}
					}
					.dis_progress_btn_text{
						color: #E8594F;
					}
				}
			}
		}
	}
</style>
